<template>
    <div class="header">
        <HeaderButton theme="dark" class="menu-fold" @click="switchCollapsed">
            <MenuFoldOutlined v-if="!collapsed" />
            <MenuUnfoldOutlined v-else />
        </HeaderButton>
        <span class="welcome"> 欢迎进入{{ settingStore.name }} </span>
        <div class="user-wrapper">
            <station v-if="isNormalUser" theme="dark" />
            <HeaderButton theme="dark" @click="handleSheet"> <img :src="Shouce" alt="数据手册" />数据手册 </HeaderButton>
            <a-divider class="line" type="vertical" />
            <HeaderButton theme="dark" @click="handleWarranty"> <img :src="Zhibaochaxun" alt="数据手册" />质保查询 </HeaderButton>
            <User theme="dark" />
        </div>
    </div>
</template>
<script setup>
import { computed, inject } from 'vue'
import { useRouter } from 'vue-router'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import { useSettingStore, useUserinfoStore } from '@iframe/tools/store'
import HeaderButton from '/@/components/HeaderButton/index.vue'
import Station from '/@/components/Station/index.vue'
import User from './../../components/User/index.vue'
import Shouce from '/@/assets/image/layouts/icon-dark-shouce.png'
import Zhibaochaxun from '/@/assets/image/layouts/icon-dark-zhibaochaxun.png'

const router = useRouter()
const emit = defineEmits(['change'])
const collapsed = inject('collapsed')

const settingStore = useSettingStore()
const userinfoStore = useUserinfoStore()

const isNormalUser = computed(() => {
    return userinfoStore.getUserinfo.isAdmin === 0
})

const switchCollapsed = () => {
    emit('change')
}

const handleSheet = () => {
    window.open('/manual.html')
}

const handleWarranty = () => {
    router.push('/inverter/warranty')
}
</script>
<style lang="less" scoped>
.header {
    color: #666666;
    display: flex;
    align-items: center;
    .menu-fold {
        height: 40px;
        font-size: 22px;
        margin: 9px 0;
        color: #666666;
    }
    .user-wrapper {
        flex: 1;
        box-sizing: border-box;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .line {
            border-color: #999999;
        }
        img {
            margin-right: 3px;
        }
    }
}
</style>
